<template>
  <div class="container" :style="containerStyles">
    <!-- Header Section -->
    <header>
      <div class="header">
        <div class="header-left">
          <span>登录日志查询系统</span>
        </div>

        <div class="header-right">
          <div class="nav">
            <a href="./index.html">首页</a>
          </div>
        </div>

        <div class="header-middle">
          <img :src="logoSrc" alt="Logo" class="logo" />
        </div>
      </div>
    </header>

    <!-- Query Form Section -->
    <section class="query-form">
      <el-form :inline="true" @submit.prevent="fetchLogs" class="query-form">
        <el-form-item label="用户ID">
          <el-input v-model="filters.userId" placeholder="请输入用户ID" />
        </el-form-item>

        <el-form-item label="开始日期">
          <el-date-picker v-model="filters.startDate" type="date" placeholder="选择开始日期" />
        </el-form-item>

        <el-form-item label="结束日期">
          <el-date-picker v-model="filters.endDate" type="date" placeholder="选择结束日期" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="fetchLogs">查询</el-button>
        </el-form-item>
      </el-form>
    </section>

    <!-- Log Data Section -->
    <section class="log-data">
      <div class="main-box">
        <div class="main-box-header">
          <div class="title">
            <img :src="blockIcon" alt="Block Icon" class="block-icon" />
            登录日志：<span>{{ filters.userId || '全部用户' }}</span>
          </div>
        </div>

        <!-- Loading Spinner -->
        <div v-if="isLoading" class="loading">
          <img :src="loadingIcon" alt="Loading" />
        </div>

        <!-- Logs List -->
        <div v-if="logs.length > 0">
          <el-table :data="logs" style="width: 100%">
            <el-table-column prop="id" label="ID" width="100" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="ip_address" label="IP 地址" />
            <el-table-column prop="login_time" label="登录时间" />
            <el-table-column prop="status" label="登录状态" />
          </el-table>

          <!-- Pagination -->
          <el-pagination
            :current-page="page"
            :page-size="pageSize"
            :total="totalCount"
            @current-change="handlePageChange"
            layout="prev, pager, next, jumper, ->, total"
          />
        </div>
        <div v-else class="nodetail">暂无登录日志</div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        userId: '',
        startDate: '',
        endDate: ''
      },
      logs: [],               // 存储查询到的登录日志
      isLoading: false,       // 加载状态
      page: 1,                // 当前页码
      pageSize: 10,           // 每页显示的条目数
      totalCount: 0,          // 总条目数

      // 图片路径
      logoSrc: require('@/assets/logo.png'),
      blockIcon: require('@/assets/block-icon.png'),
      loadingIcon: require('@/assets/loading.gif')
    };
  },
  methods: {
    async fetchLogs() {
      this.isLoading = true;

      const params = {
        userId: this.filters.userId,
        startDate: this.filters.startDate,
        endDate: this.filters.endDate,
        page: this.page,
        pageSize: this.pageSize
      };

      try {
        const response = await fetch('http://your-api-url/login-logs', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(params),
        });
        const data = await response.json();

        this.logs = data.logs || [];
        this.totalCount = data.totalCount || 0;
      } catch (error) {
        console.error('获取登录日志失败:', error);
      } finally {
        this.isLoading = false;
      }
    },

    handlePageChange(newPage) {
      this.page = newPage;
      this.fetchLogs();
    },
  },
  mounted() {
    this.fetchLogs();  // 页面加载时查询日志
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-left {
  font-size: 24px;
  font-weight: bold;
}

.header-right {
  margin-left: auto;
}

.query-form {
  margin: 20px;
}

.query-form .el-form-item {
  margin-right: 20px;
}

.loading {
  text-align: center;
}

.main-box {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nodetail {
  text-align: center;
  color: #aaa;
}

.el-table {
  margin-top: 20px;
}

.el-pagination {
  margin-top: 20px;
}

.search-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.search-btn img {
  width: 20px;
  height: 20px;
}
</style>
